<template>
  <div class="wrapper flex flex-direction-column">
    <div class="flex-1">
      <!-- <van-dropdown-menu>
        <van-dropdown-item
          v-model="formParam.sex"
          :options="sexList"
          @change="sexChangeFn"
        />
      </van-dropdown-menu> -->
      <van-list>
        <van-cell
          v-for="(item,index) in list"
          :key="index"
          :title="`${item.name}(${item.sex && sex[item.sex] || '男'})`"
          value="查看详情"
          @click="detaulsFn(item)"
          is-link
        />
      </van-list>
    </div>
    <van-button
      type="info"
      size="normal"
      @click="addFn"
    >新增人员</van-button>
  </div>
</template>

<script>
import { Toast } from 'vant';
import xs from '@public/img/xs.gif'

import { search } from '@/assets/api/list.js'
export default {
  components: {
  },
  props: {},
  data () {
    return {
      loading: false,
      xsImg: xs,
      sex: {
        '1': '男',
        '2': '女'
      },
      sexList: [
        { text: '全部', value: '' },
        { text: '男性', value: '1' },
        { text: '女性', value: '2' },
      ],
      formParam: {
        id: "",
        name: "",
        sex: "",
        age: "",
        phone: "",
        hobby: "",
        qq: ""
      },
      list: []
    };
  },
  created () { },
  methods: {
    sexChangeFn () {
      this.matchFn({
        sex: this.formParam.sex
      })
    },
    matchFn () {
      search({}).then((res) => {
        if (res.success) {
          this.list = res.data
          return
        }
        Toast({
          message: res.msg
        });
      })
    },
    detaulsFn (row) {
      this.$router.push({ path: '/skyDetails', query: { id: row.id } })
    },
    addFn () {
      this.$router.push({ path: '/skyAdd' })
    }
  },
  mounted () {
    this.matchFn()
  },
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
  .title {
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
